@import "./reset.styl"
@import "./base.styl"
@import "./icon.styl"


.fade-enter
  transform translate3d(100%, 0, 0)
  &.fade-enter-active
    transform translate3d(0, 0, 0)
    transition transform .2s ease-in

.fade-exit
  transform translate3d(0, 0, 0)
  &.fade-exit-active
    transform translate3d(100%, 0, 0)
    transition transform .2s ease-in

.player
  .normal-player
    &.normal-enter
      opacity: 0
      .top
        transform: translate3d(0, -100px, 0)
      .bottom
        transform: translate3d(0, 100px, 0)
      &.normal-enter-active
        opacity 1
        transition: opacity 0.4s
        .top, .bottom
          transform translate3d(0, 0, 0)
          transition: transform 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)

    &.normal-exit
      opacity 1
      .top, .bottom
        transform translate3d(0, 0, 0)
      &.normal-exit-active
        opacity 0
        transition all .4s
        .top
          transform: translate3d(0, -100px, 0)
          transition: transform 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)
        .bottom
          transform: translate3d(0, 100px, 0)
          transition: transform 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)

.search-list
  .search-item
    // 动画初始位置
    &.list-enter
      height 0
      // 动画进入位置
      &.list-enter-active
        height 40px
        transition height 0.3s
    &.list-exit
      height 40px
      &.list-exit-active
        height 0
        transition height 0.3s

.playlist
  &.list-fade-enter
    opacity 0
    .list-wrapper
      transform translate3d(0, 100%, 0)
    &.list-fade-enter-active
      opacity 1
      transition all 0.3s
      .list-wrapper
        transform translate3d(0, 0, 0)
        transition: all 0.3s
  &.list-fade-exit
    opacity 1
    .list-wrapper
      transform translate3d(0, 0, 0)
    &.list-fade-exit-active
      opacity: 0
      transition all 0.2s
      .list-wrapper
        transform: translate3d(0, 100%, 0)
        transition all 0.2s
  .list-content
    .item
      // 动画初始位置
      &.list-enter
        height 0
        // 动画进入位置
        &.list-enter-active
          height 40px
          transition height 0.2s
      &.list-exit
        height 40px
        &.list-exit-active
          height 0
          transition height 0.2s
